<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maxi
			mum-scale=1, user-scalable=no">
		<title>积分支付</title>
		<link href="./public/css/bootstrap.min_1.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="./public/css/header.css"  type="text/css"/>
		<link rel="stylesheet" href="./public/css/jfzf.css"  type="text/css"/>
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
	</head>
	<body>
		<div class="container">
			<!-- 头部 start -->
			<div class="header">
				<a href="{:U('Index/index')}" class="home">主页</a>
				<div class="title">
					积分支付
				</div>
			</div>
			<!-- 头部 end -->
				<div class="control-group" style="color: red;">
					使用说明：需要开通的省份，请联系管理员
					<br />
					<ul>
						<li>1、输入手机号－获取登陆验证码—输入登录验证码—登陆</li>
						<li>2、根据用户积分数－选择合适面值（分省份）－系统会自动下发第二个验证码－向用户索要新验证码－提交－消费成功</li>
						<li>3、每个用户每月最多可消费面值200元，如用户有很多积分，请勿多次消费</li>
					</ul>
				</div>
				
				<div class="weui-cells weui-cells_form">
				  <div class="weui-cell">
				    <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
				    <div class="weui-cell__bd">
				      <input class="weui-input" id="tel" type="number" placeholder="请输入手机号" maxlength="11">
				    </div>
				  </div>
				  
				  <div class="weui-cell weui-cell_vcode" style="border-bottom: 1px solid #EEEEEE;">
				    <div class="weui-cell__hd">
				      <label class="weui-label">验证码</label>
				    </div>
				    <div class="weui-cell__bd">
				      <input class="weui-input" id="code" type="number" maxlength="6" placeholder="请输入验证码">
				    </div>
				    <div class="weui-cell__ft">
				      <button id="get_code" class="weui-vcode-btn" style="font-size: 0.6rem;width: 162px;margin: 0;" >获取验证码</button>
				    </div>
				  </div>
				  <div class="control-group p2" >
				    <label class="control-label " for="input01"></label>
				    <div class="controls"> 
						<select id="price" name="price" class="input-large" style="background:#ffffff;">
							<option value="0">请选择积分值</option>
											<foreach name="data" item="v">
												<option value="{$v.id}">{$v.province} 【{$v.sum_num}个】 {$v.money} 元({$v.score}积分)</option>
											</foreach>	
						</select>
        					<p class="help-block"></p>
      				</div>
      				<!--<div class="btns" id="btn2">
				  		<a href="javascript:;" id="login_btn_2" class="weui-btn weui-btn_primary ">提交</a>
				  		<a href="javascript:;" class="weui-btn weui-btn_primary ">重新开始</a>
				  	</div>-->
				  	<div id="loner">
				  		<input type="hidden" value="0" id="integral" />
				  		<span>拥有的积分：<span id="number" style="color: #ff0000;">0</span></span>
				  	</div>
    			</div>
				  	<div class="btns" id="btn1">
				  		<a href="javascript:;" id="login_btn_1" class="weui-btn weui-btn_primary ">提交验证</a>
				  		<a href="javascript:;" class="weui-btn weui-btn_primary ">重新开始</a>
				  	</div>
				  	
				</div>				
					
	</div>
		<script src="./public/js/jquery-2.1.0.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#get_code").click(function(){
					let numObj = 60,
						time = null;
							time = setInterval(function(){
								if(numObj <= 60){
									numObj--;	
									$("#get_code").html("已发送验证码（"+numObj + "秒）");
									$("#get_code").attr("disabled",true);
									$("#get_code").css("color","#666666");
									if(numObj == 0){
										$("#get_code").html("获取验证码");
										$("#get_code").removeAttr("disabled");
										clearInterval(time);
									}
								}	
							},1000);
				})
				// 登录 
				$("#login_btn_1").click(function(){
					var tel = $('#tel').val(),//电话号码
						price = $("#price").val().split('|'),//地区
						code = $("#code").val(),//验证码
						sub_price = price[0];//将地区名字截取出来
						if(isPoneAvailable(tel) == false && tel.length != 11){//验证手机号码是否正确
							alert("手机号码不正确");
						}else{
							$.ajax({//验证电话号码归属地
								type:"GET",
								url:"http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+tel,
								dataType:'jsonp',
								error:function(){
								},
								success:function(data){
									var address = data.province;
									if(sub_price == address){//正确
										alert("符合");
										$.ajax({//验证成功 发送数据到后台
											type:"post",
											url:"",
											data:{
												tel : tel,
												price : price[1],
												code : code
											},
											dataType:'json',
											error:function(){
												
											},
											success:function(data){
												
											}
										});
									}else{
										alert("号码归属地与所选城市不符合");
									}
								}
							});
						}
					
				})
				
			})
//验证手机号码
function isPoneAvailable(str) {
  	var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
   	if (!myreg.test(str)) {  
	      return false;  
	} else {  
	      return true;  
	} 
}

		</script>
	</body>
</html>

